<template>
	<view class="comp-beauty-list" :style="{
		marginLeft: offsetLeft + 'px',
	}">
		<scroll-view class="scroll-wrap" scroll-x="true" scroll-left="0" :enable-flex="true">
			<view :class="['scroll-view-item_H',{
				active: _current === index,
				last: index === list.length - 1,
			}]" v-for="(item,index) in list" :key="index"
				@tap="onTabItem(index)">
				<image v-if="current === index" class="item-img" :src="item.activeImg"></image>
				<image v-else class="item-img" :src="item.img"></image>
				<text class="item-text">{{item.text}}</text>
			</view>
		</scroll-view>

	</view>


</template>

<script setup>
	import {
		ref,
		reactive,
		defineProps,
		defineEmits,
		watch,
	} from "vue";
	import CustomSvg from '@/components/custom-svg/index.vue';
	const props = defineProps({
		current: {
			type: Number,
			default: 0,
		},
		offsetLeft: {
			type: Number,
			default: 0,
		},
		list: {
			type: Array,
			default: () => ([]),
		},
	});
	
	const _current = ref(props.current);

	watch(props.current, (val) => {
		_current.value = val;
	});
	
	const emits = defineEmits(['change']);

	const onTabItem = (index) => {
		_current.value = index;
		emits('change',index);
	}
</script>

<style lang="less" scoped>
	.comp-beauty-list {
		position: relative;

		.scroll-wrap {
			white-space: nowrap;
			width: 100%;
		}

		.scroll-view-item_H {
			display: inline-flex;
			flex-direction: column;
			gap: 10px;
			align-items: center;
			justify-content: center;
			box-sizing: border-box;
			height: 80px;
			width: 66px;
			margin-right: 17px;
			background-color: #fff;
			border-radius: 8px;
			padding: 5px 0px 5px 0px;

			&.active {
				border: 3px solid rgba(69, 145, 230, 1);
				.item-text {
					color: rgba(69, 145, 230, 1);
				}
			}
			&.last {
				margin-right: 0;
			}
		}

		.item-img {
			height: 36px;
			width: 36px;
		}
		.item-text {
			font-size: 12px;
			line-height: 18px;
			color: rgba(166, 166, 166, 1);
		}
	}
</style>